<template>
    <div>
        <div class="top_wrap">
            <div class="img_wrap">
                <img :src="playList.coverImgUrl">
            </div>
            <div class="info_wrap">
                <div class="description">
                    <span>{{playList.name}}</span>
                </div>
                <div class="description user">
                    <img :src="playList.creator.avatarUrl" class="user_icon">
                    <span>{{playList.creator.nickname}}</span>
                    <span class="Date">{{playList.createTime}}创建</span>
                </div>
                <div class="description">
                    <span class="title">标签：</span>
                    <span>{{playList.tags[0]}}/{{playList.tags[1]}}/{{playList.tags[2]}}</span>
                </div>
                <div class="description text_overflow">
                    <span class="title">简介：</span>
                    <span>{{playList.description}}</span>
                </div>
            </div>
        </div>
        <div class="main_wrap">
            <el-tabs v-model="activeName">
                <el-tab-pane label="歌曲列表" name="songs">
                    <table class="el-table">
                        <thead>
                        <th width="5%"></th>
                        <th width="15%"></th>
                        <th width="25%">音乐标题</th>
                        <th width="15%">歌手</th>
                        <th width="30%">专辑</th>
                        <th width="10%">时长</th>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in songList" :key="index">
                            <td>{{index+1}}</td>
                            <td class="img_column">
                                <img :src="item.al.picUrl" alt="">
                                <span class="el-icon-video-play play-but" @click="playMusic(item.id)"></span>
                            </td>
                            <td>{{item.name}}</td>
                            <td>{{item.ar[0].name}}</td>
                            <td>{{item.al.name}}</td>
                            <td>{{item.dt}}</td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="评论" name="comments">
                    <div class="comment_wrap" v-if="hotCommentCount!=0">
                        <h3>热门评论({{hotCommentCount}})</h3>
                        <div class="item" v-for="(item,index) in hotcomment" :key="index">
                            <div class="icon_wrap">
                                <img :src="item.user.avatarUrl" alt="">
                            </div>
                            <div class="info_wrap">
                                <div class="user_id">
                                    <span class="text_blue">{{item.user.nickname}}：</span>
                                    {{item.content}}
                                </div>
                                <div class="re_content" v-if="item.beReplied.length!=0">
                                    <span class="text_blue">{{item.beReplied[0].user.nickname}}：</span>
                                    {{item.beReplied[0].content}}
                                </div>
                                <div class="user_time">
                                    <span>{{item.time}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment_wrap">
                        <h3>最新评论({{commentCount}})</h3>
                        <div class="item" v-for="(item,index) in comment" :key="index">
                            <div class="icon_wrap">
                                <img :src="item.user.avatarUrl" alt="">
                            </div>
                            <div class="info_wrap">
                                <div class="user_id">
                                    <span class="text_blue">{{item.user.nickname}}：</span>
                                    {{item.content}}
                                </div>
                                <div class="re_content" v-if="item.beReplied.length!=0">
                                    <span class="text_blue">{{item.beReplied[0].user.nickname}}：</span>
                                    {{item.beReplied[0].content}}
                                </div>
                                <div class="user_time">
                                    <span>{{item.time}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page_card">
                        <el-pagination
                                @current-change="currentPage"
                                layout="prev, pager, next"
                                :current-page="page"
                                :page-size="20"
                                :total="commentCount">
                        </el-pagination>
                    </div>

                </el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "PlayList",
        data(){
            return{
                playList:{
                    creator:{},
                    tags:[],
                    trackIds:[],
                },
                songList:[],
                activeName:'songs',
                hotcomment:[],
                hotCommentCount:0,
                comment:[],
                commentCount:0,
                page:1,
            }
        },
        methods:{
           getSongs(){
               //获取vue容器
               var that=this;
               axios({
                    url:'https://autumnfish.cn/playlist/detail',
                    method:'get',
                    params:{
                        id:this.$route.query.id,
                    },
                }).then(response=>{
                    //console.log(response);
                    this.playList=response.data.playlist;
                    let app=this.playList;
                    var date=new Date(this.playList.createTime);
                    //将获取到的创建时间由毫秒转化为想要的格式
                   Date.prototype.toLocaleString=function(){
                       //自定义时间格式
                      function addZero(num) {
                          if(num<10)
                          {
                              return '0'+num;
                          }
                          else
                              return num;
                      }
                       return this.getFullYear()+'-'+addZero((this.getMonth()+1))+'-'+addZero(this.getDate());
                   };
                    this.playList.createTime=date.toLocaleString();
                    getSongList(0,app.trackIds.length);
                   //尝试一下递归
                   /*递归可以解决顺序问题，暂且先用递归*/
                   function getSongList(j,length) {
                       axios({
                           url:'https://autumnfish.cn/song/detail',
                           method:'get',
                           params:{
                               ids:app.trackIds[j].id,
                           },
                       }).then(response=>{
                           that.songList.push(response.data.songs[0]);
                           //将获取到的毫秒转化为分+秒
                           let duration=that.songList[j].dt;
                           let min=parseInt(duration/1000/60);
                           let second=parseInt(duration/1000%60);
                           if(min<10)
                               min='0'+min;
                           if(second<10)
                               second='0'+second;
                           that.songList[j].dt=`${min}:${second}`;

                           if(++j<length){
                               getSongList(j,length);
                           }
                       })
                   }
                   //另一个思路：像播放音乐那样，给tr绑定一个函数，可以传id，用什么事件绑定是问题，然后可以用songList.值来代替
                   //item
                    //通过track的id获取歌曲的详细信息，在for循环中异步会出问题
                   /******************
                   for(let i=0;i<this.playList.trackIds.length;i++)
                    {
                          axios({
                            url:'https://autumnfish.cn/song/detail',
                            method:'get',
                            params:{
                                ids:this.playList.trackIds[i].id,
                            },
                        }).then(response=>{
                              //this.songList[i]=response.data.songs[0];
                            //这个会导致每次产生的结果不同，原因即为在当前循环中axios还没获得接口传过来的数据，
                            //then后面已经执行了.因此根据i赋值会错位。而用push会每次结果不同。
                             this.songList.push(response.data.songs[0]);

                            if(i==this.playList.trackIds.length-1)
                            {
                                for(let j=0;j<this.songList.length;j++)
                                {   //将获取到的毫秒转化为分+秒
                                    let duration=this.songList[j].dt;
                                    let min=parseInt(duration/1000/60);
                                    let second=parseInt(duration/1000%60);
                                    if(min<10)
                                        min='0'+min;
                                    if(second<10)
                                        second='0'+second;
                                    this.songList[j].dt=`${min}:${second}`;
                                }
                            }
                       })
                    }
                    *************************/
                   // console.log(this.songList);
                })
            },
            playMusic(id){
                axios({
                    url:'https://autumnfish.cn/song/url',
                    method:'get',
                    params:{
                        id:id,
                    },
                }).then(response=>{
                    this.$parent.musicUrl=response.data.data[0].url;
                })
            },
            gethotComments(){
               axios({
                   url:'https://autumnfish.cn/comment/hot',
                   method:'get',
                   params:{
                       id:this.$route.query.id,
                       type:2,
                       limit:20,
                   },
               }).then(response=>{
                   //console.log(response);
                   this.hotcomment=response.data.hotComments;
                   this.hotCommentCount=response.data.total;

                   Date.prototype.toLocaleString=function(){
                       //自定义时间格式
                       function addZero(num) {
                           //加0
                           if(num<10)
                           {
                               return '0'+num;
                           }
                           else
                               return num;
                       }
                       return this.getFullYear()+'-'+addZero((this.getMonth()+1))+'-'+ addZero(this.getDate())+' '+
                           addZero(this.getHours())+':'+addZero(this.getMinutes());
                   };
                   for(let i=0;i<this.hotcomment.length;i++)
                   {
                       var date=new Date(this.hotcomment[i].time);
                       this.hotcomment[i].time=date.toLocaleString();
                   }
               })
            },
            getComments(){
                axios({
                    url:'https://autumnfish.cn/comment/playlist',
                    method:'get',
                    params:{
                        id:this.$route.query.id,
                        limit:20,
                        offset:(this.page-1)*20,
                    },
                }).then(response=>{
                    //console.log(response);
                    this.comment=response.data.comments;
                    this.commentCount=response.data.total;

                    Date.prototype.toLocaleString=function(){
                        //自定义时间格式
                        function addZero(num) {
                            //加0
                            if(num<10)
                            {
                                return '0'+num;
                            }
                            else
                                return num;
                        }
                        return this.getFullYear()+'-'+addZero((this.getMonth()+1))+'-'+ addZero(this.getDate())+' '+
                            addZero(this.getHours())+':'+addZero(this.getMinutes());
                    };
                    for(let i=0;i<this.comment.length;i++)
                    {
                        var date=new Date(this.comment[i].time);
                        this.comment[i].time=date.toLocaleString();
                    }
                })
            },
            currentPage(tPage){
                this.page=tPage;
                this.getComments();
            },
        },
        created() {
            this.getSongs();
            this.gethotComments();
            this.getComments();
        }
    }
</script>

<style scoped>
    img{
        width:100%;
        height: 100%;
        border-radius: 5px;
    }
    .top_wrap{
        position: relative;
        display: flex;
        width: 90%;
        left: 5%;
        top:5px;
        padding: 10px;
    }
    .main_wrap{
        position: relative;
        width: 90%;
        left: 5%;
        top:5px;
        padding: 10px;
    }
    .top_wrap .img_wrap{
        width: 200px;
        height: 200px;
    }
    .top_wrap .info_wrap{
        flex: 1;
        padding-left: 20px;
    }
    .top_wrap .info_wrap .description{
        height: 30px;
        margin: 10px;
        line-height: 30px;
    }
    .top_wrap .info_wrap .text_overflow{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        height: 90px;
        overflow: hidden;
    }
    .top_wrap .info_wrap .user>span{
        position: relative;
        display: inline-block;
        margin-left: 10px;
        bottom: 5px;
    }
    .top_wrap .info_wrap .user .Date{
        font-size: 15px;
        color: grey;
    }
    .top_wrap .info_wrap .description .user_icon{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .top_wrap .info_wrap .title{
        font-size: 18px;
    }
    .main_wrap .img_column>img{
        width: 100px;
        height: 100px;
    }
    .main_wrap .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        left: 40px;
        top:40px;
        font-size:40px;
        color: sandybrown;
        cursor: pointer;
    }
    .el-table td, .el-table th{
       padding: 12px 10px;
    }
    .main_wrap .comment_wrap{
        width: 100%;
    }
    .main_wrap .comment_wrap .item{
        width: 100%;
        padding: 5px;
        margin: 15px;
        display: flex;
        border-bottom: 1px solid grey;
    }
    .main_wrap .comment_wrap .icon_wrap{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
    }
    .main_wrap .comment_wrap .icon_wrap>img{
        border-radius: 50%;
    }
    .main_wrap .comment_wrap .info_wrap{
        flex:1;
        margin-left: 10px;
    }
    .main_wrap .comment_wrap .info_wrap .user_id{
        position: relative;
    }
    .text_blue{
        color: #517EAF;
    }
    .main_wrap .comment_wrap .info_wrap .re_content{
        position: relative;
        background:#E6E5E6;
        border-radius: 5px;
        line-height: 30px;
    }
    .main_wrap .comment_wrap .info_wrap .user_time{
        position: relative;
        top:5px;
        color: grey;
        font-size: 14px;
        height: 30px;
    }
    .page_card{
        width: 90%;
        position: relative;
        left: 5%;
        text-align: center;
    }



</style>